import React, { useState, useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom'

interface AnnouncementDetail {
  id: number
  title: string
  content: string
  source: string
  publishTime: string
  readCount: string
  isPinned?: boolean
}

function AnnouncementDetail() {
  const navigate = useNavigate()
  const { id } = useParams<{ id: string }>()
  
  const [announcement, setAnnouncement] = useState<AnnouncementDetail | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    if (id) {
      setLoading(true)
      console.log('开始获取公告详情，ID:', id)
      
      // 立即设置数据，避免异步延迟
      const mockData: AnnouncementDetail = {
        id: parseInt(id),
        title: '智慧医院便民平台APP上线啦,手机也能问诊医生啦',
        content: '智慧医院建设的第二个领域是以患者为对象的智慧服务。2019年,国家卫生健康委发布《医院智慧服务分级评估标准体系(试行)`,将医院"智慧服务"分成5级,主要指医院(特别是三级医院)利用互联网、物联网等信息化手段,为患者提供预约诊疗、候诊提醒、院内导航等服务,范围涵盖诊前、诊中、诊后和基础安全等就诊全流程。智慧医院便民平台APP的主要功能包括：在线问诊、预约挂号、检查报告、用药指导、健康档案、院内导航、候诊提醒、在线支付等。平台优势：24小时在线服务，减少患者往返医院次数，智能分诊系统，数据安全加密，与医院HIS系统无缝对接。',
        source: '四川省保健社区中心',
        publishTime: '2020-01-01 17:30:20',
        readCount: '1W+人已读',
        isPinned: true
      }
      
      // 使用 setTimeout 确保状态更新在下一个事件循环中执行
      setTimeout(() => {
        setAnnouncement(mockData)
        setLoading(false)
        console.log('获取公告详情成功，ID:', id)
      }, 0)
    }
  }, [id])

  console.log('当前状态:', { loading, announcement, id })
  
  if (loading || !announcement) {
    return (
      <div style={{
        minHeight: '100vh',
        background: '#f5f5f5',
        paddingTop: 'env(safe-area-inset-top)',
        paddingBottom: 'env(safe-area-inset-bottom)'
      }}>
        <div style={{
          background: 'white',
          padding: '16px',
          borderBottom: '1px solid #f0f0f0',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }}>
          <button 
            onClick={() => navigate(-1)} 
            title="返回"
            style={{
              background: 'none',
              border: 'none',
              fontSize: '20px',
              color: '#333',
              cursor: 'pointer',
              padding: '4px',
              borderRadius: '50%',
              transition: 'background-color 0.2s ease'
            }}
          >←</button>
          <h1 style={{
            margin: 0,
            fontSize: '18px',
            fontWeight: '600',
            color: '#333'
          }}>公告详情</h1>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span style={{
              fontSize: '20px',
              color: '#666',
              cursor: 'pointer',
              padding: '4px',
              borderRadius: '50%',
              transition: 'background-color 0.2s ease'
            }}>⋯</span>
            <span style={{
              fontSize: '20px',
              color: '#666',
              cursor: 'pointer',
              padding: '4px',
              borderRadius: '50%',
              transition: 'background-color 0.2s ease'
            }}>◎</span>
          </div>
        </div>
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          minHeight: '60vh',
          background: 'white',
          margin: '16px',
          borderRadius: '12px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
        }}>
          <div style={{
            fontSize: '16px',
            color: '#666',
            display: 'flex',
            alignItems: 'center',
            gap: '8px'
          }}>
            <div style={{
              width: '20px',
              height: '20px',
              border: '2px solid #f3f3f3',
              borderTop: '2px solid #1677ff',
              borderRadius: '50%',
              animation: 'spin 1s linear infinite'
            }}></div>
            加载中...
          </div>
        </div>
      </div>
    )
  }

  return (
    <div style={{
      minHeight: '100vh',
      height: '100vh',
      background: '#f5f5f5',
      paddingTop: 'env(safe-area-inset-top)',
      paddingBottom: 'env(safe-area-inset-bottom)',
      overflow: 'auto',
      display: 'flex',
      flexDirection: 'column'
    }}>
      {/* 头部 - 固定高度 */}
      <div style={{
        background: 'white',
        padding: '16px',
        borderBottom: '1px solid #f0f0f0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        flexShrink: 0,
        position: 'sticky',
        top: 0,
        zIndex: 10
      }}>
        <button 
          onClick={() => navigate(-1)} 
          title="返回"
          style={{
            background: 'none',
            border: 'none',
            fontSize: '20px',
            color: '#333',
            cursor: 'pointer',
            padding: '4px',
            borderRadius: '50%',
            transition: 'background-color 0.2s ease'
          }}
        >←</button>
        <h1 style={{
          margin: 0,
          fontSize: '18px',
          fontWeight: '600',
          color: '#333'
        }}>公告详情</h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <button 
            onClick={() => {
              console.log('手动刷新数据')
              setLoading(true)
              setTimeout(() => {
                const mockData: AnnouncementDetail = {
                  id: parseInt(id || '1'),
                  title: '智慧医院便民平台APP上线啦,手机也能问诊医生啦',
                  content: '智慧医院建设的第二个领域是以患者为对象的智慧服务。2019年,国家卫生健康委发布《医院智慧服务分级评估标准体系(试行)`,将医院"智慧服务"分成5级,主要指医院(特别是三级医院)利用互联网、物联网等信息化手段,为患者提供预约诊疗、候诊提醒、院内导航等服务,范围涵盖诊前、诊中、诊后和基础安全等就诊全流程。',
                  source: '四川省保健社区中心',
                  publishTime: '2020-01-01 17:30:20',
                  readCount: '1W+人已读',
                  isPinned: true
                }
                setAnnouncement(mockData)
                setLoading(false)
              }, 100)
            }}
            style={{ 
              background: '#1677ff', 
              color: 'white', 
              border: 'none', 
              padding: '8px 12px', 
              borderRadius: '6px',
              fontSize: '12px',
              cursor: 'pointer'
            }}
          >
            刷新数据
          </button>
          <span style={{
            fontSize: '20px',
            color: '#666',
            cursor: 'pointer',
            padding: '4px',
            borderRadius: '50%',
            transition: 'background-color 0.2s ease'
          }}>⋯</span>
          <span style={{
            fontSize: '20px',
            color: '#666',
            cursor: 'pointer',
            padding: '4px',
            borderRadius: '50%',
            transition: 'background-color 0.2s ease'
          }}>◎</span>
        </div>
      </div>

      {/* 内容区域 - 自适应高度 */}
      <div style={{
        flex: 1,
        overflow: 'auto',
        padding: '16px',
        paddingBottom: '32px'
      }}>
        <div style={{
          background: 'white',
          borderRadius: '12px',
          padding: '20px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
          minHeight: 'auto',
          height: 'auto',
          overflow: 'visible'
        }}>
        
          <h2 style={{
            margin: '0 0 16px 0',
            fontSize: '20px',
            fontWeight: '700',
            color: '#333',
            lineHeight: '1.4'
          }}>{announcement.title}</h2>
          
          <div style={{
            fontSize: '14px',
            color: '#666',
            marginBottom: '20px',
            paddingBottom: '16px',
            borderBottom: '1px solid #f0f0f0'
          }}>{announcement.source}</div>
          
          <div style={{
            marginBottom: '24px'
          }}>
            <p style={{
              margin: '0 0 16px 0',
              fontSize: '16px',
              lineHeight: '1.8',
              color: '#333',
              textAlign: 'justify'
            }}>{announcement.content}</p>
          </div>
          
          <div style={{
            paddingTop: '20px',
            borderTop: '1px solid #f0f0f0',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            fontSize: '14px',
            color: '#999'
          }}>
            <div style={{ color: '#666' }}>发布于{announcement.publishTime}</div>
            <div style={{ color: '#1677ff', fontWeight: '500' }}>{announcement.readCount}</div>
          </div>

          <div style={{
            display: 'flex',
            justifyContent: 'space-around',
            padding: '20px 0',
            borderTop: '1px solid #f0f0f0',
            borderBottom: '1px solid #f0f0f0',
            margin: '20px 0'
          }}>
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: '8px',
              cursor: 'pointer'
            }}>
              <span style={{ fontSize: '24px' }}>👍</span>
              <span style={{ fontSize: '14px', color: '#666', fontWeight: '500' }}>点赞 128</span>
            </div>
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: '8px',
              cursor: 'pointer'
            }}>
              <span style={{ fontSize: '24px' }}>💬</span>
              <span style={{ fontSize: '14px', color: '#666', fontWeight: '500' }}>评论 32</span>
            </div>
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: '8px',
              cursor: 'pointer'
            }}>
              <span style={{ fontSize: '24px' }}>📤</span>
              <span style={{ fontSize: '14px', color: '#666', fontWeight: '500' }}>分享 15</span>
            </div>
          </div>

          <div style={{ marginTop: '24px' }}>
            <h3 style={{
              fontSize: '18px',
              fontWeight: '600',
              color: '#333',
              margin: '0 0 16px 0',
              paddingBottom: '12px',
              borderBottom: '2px solid #f0f0f0'
            }}>相关公告</h3>
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              gap: '16px'
            }}>
              <div style={{
                background: '#f8f9fa',
                borderRadius: '8px',
                padding: '16px',
                cursor: 'pointer',
                borderLeft: '4px solid #1677ff'
              }}>
                <div>
                  <h4 style={{
                    fontSize: '16px',
                    fontWeight: '600',
                    color: '#333',
                    margin: '0 0 8px 0',
                    lineHeight: '1.4'
                  }}>智慧医院建设进展报告</h4>
                  <p style={{
                    fontSize: '14px',
                    color: '#666',
                    margin: '0 0 12px 0',
                    lineHeight: '1.5'
                  }}>了解智慧医院建设的最新进展和成果...</p>
                  <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    fontSize: '12px',
                    color: '#999'
                  }}>
                    <span style={{ color: '#1677ff', fontWeight: '500' }}>四川省保健社区中心</span>
                    <span>2天前</span>
                  </div>
                </div>
              </div>
              <div style={{
                background: '#f8f9fa',
                borderRadius: '8px',
                padding: '16px',
                cursor: 'pointer',
                borderLeft: '4px solid #1677ff'
              }}>
                <div>
                  <h4 style={{
                    fontSize: '16px',
                    fontWeight: '600',
                    color: '#333',
                    margin: '0 0 8px 0',
                    lineHeight: '1.4'
                  }}>在线问诊使用指南</h4>
                  <p style={{
                    fontSize: '14px',
                    color: '#666',
                    margin: '0 0 12px 0',
                    lineHeight: '1.5'
                  }}>详细的使用说明和常见问题解答...</p>
                  <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    fontSize: '12px',
                    color: '#999'
                  }}>
                    <span style={{ color: '#1677ff', fontWeight: '500' }}>四川省保健社区中心</span>
                    <span>1周前</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 互动信息 */}
        <div style={{
          background: 'white',
          marginTop: '16px',
          borderRadius: '12px',
          padding: '20px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
        }}>
          <h3 style={{
            fontSize: '18px',
            fontWeight: '600',
            color: '#333',
            margin: '0 0 16px 0',
            paddingBottom: '12px',
            borderBottom: '2px solid #f0f0f0'
          }}>相关公告</h3>
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '16px'
          }}>
            <div style={{
              background: '#f8f9fa',
              borderRadius: '8px',
              padding: '16px',
              cursor: 'pointer',
              borderLeft: '4px solid #1677ff'
            }}>
              <div>
                <h4 style={{
                  fontSize: '16px',
                  fontWeight: '600',
                  color: '#333',
                  margin: '0 0 8px 0',
                  lineHeight: '1.4'
                }}>智慧医院建设进展报告</h4>
                <p style={{
                  fontSize: '14px',
                  color: '#666',
                  margin: '0 0 12px 0',
                  lineHeight: '1.5'
                }}>了解智慧医院建设的最新进展和成果...</p>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  fontSize: '12px',
                  color: '#999'
                }}>
                  <span style={{ color: '#1677ff', fontWeight: '500' }}>四川省保健社区中心</span>
                  <span>2天前</span>
                </div>
              </div>
            </div>
            <div style={{
              background: '#f8f9fa',
              borderRadius: '8px',
              padding: '16px',
              cursor: 'pointer',
              borderLeft: '4px solid #1677ff'
            }}>
              <div>
                <h4 style={{
                  fontSize: '16px',
                  fontWeight: '600',
                  color: '#333',
                  margin: '0 0 8px 0',
                  lineHeight: '1.4'
                }}>在线问诊使用指南</h4>
                <p style={{
                  fontSize: '14px',
                  color: '#666',
                  margin: '0 0 12px 0',
                  lineHeight: '1.5'
                }}>详细的使用说明和常见问题解答...</p>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  fontSize: '12px',
                  color: '#999'
                }}>
                  <span style={{ color: '#1677ff', fontWeight: '500' }}>四川省保健社区中心</span>
                  <span>1周前</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 相关公告推荐 */}
        <div style={{
          background: 'white',
          marginTop: '16px',
          borderRadius: '12px',
          padding: '20px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
          marginBottom: '32px'
        }}>
          <h3 style={{
            fontSize: '18px',
            fontWeight: '600',
            color: '#333',
            margin: '0 0 16px 0',
            paddingBottom: '12px',
            borderBottom: '2px solid #f0f0f0'
          }}>相关公告</h3>
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '16px'
          }}>
            <div style={{
              background: '#f8f9fa',
              borderRadius: '8px',
              padding: '16px',
              cursor: 'pointer',
              borderLeft: '4px solid #1677ff'
            }}>
              <div>
                <h4 style={{
                  fontSize: '16px',
                  fontWeight: '600',
                  color: '#333',
                  margin: '0 0 8px 0',
                  lineHeight: '1.4'
                }}>智慧医院建设进展报告</h4>
                <p style={{
                  fontSize: '14px',
                  color: '#666',
                  margin: '0 0 12px 0',
                  lineHeight: '1.5'
                }}>了解智慧医院建设的最新进展和成果...</p>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  fontSize: '12px',
                  color: '#999'
                }}>
                  <span style={{ color: '#1677ff', fontWeight: '500' }}>四川省保健社区中心</span>
                  <span>2天前</span>
                </div>
              </div>
            </div>
            <div style={{
              background: '#f8f9fa',
              borderRadius: '8px',
              padding: '16px',
              cursor: 'pointer',
              borderLeft: '4px solid #1677ff'
            }}>
              <div>
                <h4 style={{
                  fontSize: '16px',
                  fontWeight: '600',
                  color: '#333',
                  margin: '0 0 8px 0',
                  lineHeight: '1.4'
                }}>在线问诊使用指南</h4>
                <p style={{
                  fontSize: '14px',
                  color: '#666',
                  margin: '0 0 12px 0',
                  lineHeight: '1.5'
                }}>详细的使用说明和常见问题解答...</p>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  fontSize: '12px',
                  color: '#999'
                }}>
                  <span style={{ color: '#1677ff', fontWeight: '500' }}>四川省保健社区中心</span>
                  <span>1周前</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default AnnouncementDetail
